<template>
	<view class="content">
		<view class="info">
			<view class="info-block">
				<view class="box-prefix">昵称</view>
				<view class="nike-name">{{userInfo.nickName}}</view>
			</view>
			<view class="info-block">
				<view class="box-prefix">头像</view>
				<view class="btn" @click="replaceHead">点击更换头像</view>
				<image class="user-head" :src="userHead">
				</image>
			</view>
			<view class="info-block">
				<view class="box-prefix">性别</view>
				<uni-data-checkbox style="position: absolute;left: 100px;" selectedColor="#ffd524" v-model="radio"
					:localdata="sex"></uni-data-checkbox>
			</view>


			<view class="position">
				<view>所在地区</view>
				<view class="btn" @click="getPosition">获取位置</view>
			</view>
		</view>

		<view class="submit-button" @click="submitUserInfo">提交</view>
	</view>


</template>

<script>
	import {
		updateUserInfo,
		getUserInfoById
	} from "@/api/user.js"
	export default {
		data() {
			return {
				radio: 0,
				sex: [{
					text: '女',
					value: 0
				}, {
					text: '男',
					value: 1
				}],
				userId: 0,
				userInfo: {},
				userHead: ""
			};
		},
		onLoad(option) {
			this.userId = option.userId;
			getUserInfoById(this.userId).then(res => {
				console.log(res);
				this.userInfo = res.data;
				this.radio = this.userInfo.sex || 0;
				this.userHead = this.userInfo.head;
			})
		},
		methods: {
			getPosition() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			replaceHead() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://localhost:7777/uploadImage', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'image',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								const image = eval("window.dat=" + uploadFileRes.data).data;
								this.userHead = image
							}
						});
					}
				});
			},
			submitUserInfo() {
				const updateUserDto = {
					id: this.userId,
					nickName: this.userInfo.nickName,
					head: this.userHead,
					area: "",
					sex: this.radio
				}
				updateUserInfo(updateUserDto).then(res => {
					let userVO = {}

					// 获取之前缓存的用户信息
					uni.getStorage({
						key: 'userVO',
						success: function(res) {
							userVO = res.data;
							userVO.head = updateUserDto.head;
							userVO.sex = updateUserDto.sex;
							// 保存最新的用户信息缓存
							uni.setStorage({
								key: 'userVO',
								data: userVO,
								success: function() {
									// 跳转到我的个人页面
									uni.switchTab({
										url: "/pages/me/index"
									})
								}
							});
						}
					});
				})
			}
		}
	};
</script>

<style>
	.info {
		background-color: white;
		width: 90%;
		border-radius: 10px;
		height: 300px;
		margin: 20px auto;
		padding-top: 10px;
		position: relative;
	}

	.info-block {
		margin-top: 20px;
		margin-left: 20px;
		display: flex;
	}

	.nike-name {
		font-size: 5px;
		position: absolute;
		left: 100px;
		top: 32px;
	}

	.user-head {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: calc(100% - 100px);
	}

	.position {
		margin: 20px auto;
		background-color: white;
		border-radius: 10px;
		display: flex;
		margin-left: 20px;
	}

	.btn {
		height: 30px;
		text-align: center;
		line-height: 23.5px;
		font-size: 5px;
		color: #cdcdcd;
		position: absolute;
		left: 100px;
	}

	.submit-button {
		width: 90%;
		height: 40px;
		border-radius: 5px;
		background-color: #ffd524;
		text-align: center;
		line-height: 40px;
		position: absolute;
		bottom: 20px;
		left: 5%;
	}
</style>